<template>
  <div class="center">
    <div class="content">
      <h2>备案项目列表：</h2>
      <el-table :data="tableData" border style="width: 100%" @row-click="rowClickFn">
        <el-table-column prop="serial" label="备案编号" />
        <el-table-column prop="name" label="项目名称" />
        <el-table-column prop="state" label="状态" />
        <el-table-column prop="schedule" label="进度" />
        <el-table-column prop="date" label="备案通过日期" />
      </el-table>
      <h2>核准项目列表：</h2>
      <el-table :data="tableData1" border style="width: 100%" @row-click="rowClickFn1">
        <el-table-column prop="serial" label="备案编号" />
        <el-table-column prop="name" label="项目名称" />
        <el-table-column prop="department" label="管理部门" />
        <el-table-column prop="date" label="核准日期" />
      </el-table>
    </div>

    <!-- 备案项目列表：详细信息弹窗 -->
    <el-dialog :visible.sync="showData" :before-close="handleClose" width="95%">
      <h2>{{label}}：</h2>
      <el-table :data="curData" border style="width: 100%" :show-header="false" class="alter-tab">
        <el-table-column prop="label" label="备案编号" />
        <el-table-column prop="value" label="项目名称" />
      </el-table>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      // 备案项目列表
      tableData: [
        {
          serial: "2020-01",
          name: "备案项目一",
          state: "有效",
          schedule: "办结（通过）",
          date: "2020-06-19"
        },
        {
          serial: "2020-02",
          name: "备案项目二",
          state: "有效",
          schedule: "办结（通过",
          date: "2020-06-18"
        }
      ],
      // 备案项目详细信息
      anProject: [
        {
          label: "备案项目编号",
          value: "2020-01"
        },
        {
          label: "项目名称",
          value: "备案项目一"
        },
        {
          label: "项目所在地",
          value: "备案项目一所在地址"
        },
        {
          label: "项目总投资",
          value: "300万元"
        },
        {
          label: "项目规模以及内容",
          value: `项目一的规模及内容项目一的规模及内容项目一的规模及内容项目一的规模及内容项目一的规模及内容项目一的规模及内容项目一的规模及内容项目一的规模及内容项目一的规模及内容项目一的规模及内容项目一的规模及内容项目一的规模及内容`
        },
        {
          label: "建设单位",
          value: "备案项目一的建设单位"
        },
        {
          label: "备案机关",
          value: "发展和改革局"
        },
        {
          label: "备案申报日期",
          value: "2020年06月18日"
        },
        {
          label: "复核通过日期",
          value: "2020年06月19日"
        },
        {
          label: "项目起止年限",
          value: "2020年09月01日 - 2020年11月01日"
        },
        {
          label: "项目当前进度",
          value: "办结（通过）"
        }
      ],
      // 核准项目列表
      tableData1: [
        {
          serial: "2020-01",
          name: "核准项目一",
          department: "管理部门一",
          date: "2020-06-19"
        },
        {
          serial: "2020-02",
          name: "核准项目二",
          department: "管理部门二",
          date: "2020-06-18"
        }
      ],
      // 核准项目详细信息
      heProject: [
        {
          label: "项目代码",
          value: "2020-01"
        },
        {
          label: "项目名称",
          value: "核准项目一"
        },
        {
          label: "申报单位",
          value: "核准项目一申报单位"
        },
        {
          label: "管理单位",
          value: "核准项目一管理单位"
        },
        {
          label: "项目所在地",
          value: "核准项目一所在地址"
        },
        {
          label: "总投资",
          value: "300万元"
        },
        {
          label: "项目规模及主要内容",
          value: `项目一的规模及内容项目一的规模及内容项目一的规模及内容项目一的规模及内容项目一的规模及内容项目一的规模及内容项目一的规模及内容项目一的规模及内容项目一的规模及内容项目一的规模及内容项目一的规模及内容项目一的规模及内容`
        },
        {
          label: "审批部门",
          value: "项目一的审批部门"
        },
        {
          label: "联系电话",
          value: "00000000"
        },
        {
          label: "备案申报日期",
          value: "2020年06月18日"
        },
        {
          label: "复核通过日期",
          value: "2020年06月19日"
        }
      ],
      showData: false,
      label: "",
      curData: []
    };
  },
  methods: {
    // 关闭弹窗区域
    handleClose() {
      this.showData = false;
    },
    // 某一行被点击
    rowClickFn(row, column, event) {
      this.curData = JSON.parse(JSON.stringify(this.anProject));
      this.showData = true;
      this.label = "备案项目详细信息";
    },
    rowClickFn1(row, column, event) {
      this.curData = JSON.parse(JSON.stringify(this.heProject));
      this.showData = true;
      this.label = "核准项目详细信息";
    }
  }
};
</script>

<style lang="less">
h2 {
  font-size: 13px;
}
html,
body {
  padding: 0;
  margin: 0;
}
div {
  box-sizing: border-box;
}
.center {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  padding: 5px;
  .el-table {
    font-size: 8px;
  }
  .content {
    width: 100%;
  }
  .alter-tab {
    td:first-child {
    }
  }
}
</style>